<!-- 个人信息 -->
<template>
	<view class="page">
		<view class="list">
			<view class="item" @click="handleShowUpdateUserInfoComp()">
				<text class="label">头像</text>
				<image class="avatar" :src="userInfo.path || '/pagesC-my/static/images/default-avatar-gray.svg'"
					mode="aspectFill"></image>
			</view>
		</view>

		<view class="list">
			<view class="item" @click="handleShowUpdateUserInfoComp()">
				<text class="label">昵称</text>
				<text class="value">{{userInfo.nickname}}</text>
			</view>
			<view class="item hide-icon">
				<text class="label">登录手机号</text>
				<text class="value">{{userInfo.mobile}}</text>
			</view>
		</view>

		<view class="btn-group">
			<button class="logout-btn" @click="handleLogout()">退出登录</button>
		</view>

		<!-- 获取微信头像和昵称并更新 -->
		<c-wx-update-avatar-and-nickname v-if="updateUserInfoCompVisible" v-model:visible="updateUserInfoCompVisible">
		</c-wx-update-avatar-and-nickname>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user.js"
	import api from '@/api/index.js';
	
	const userStore = useUserStore();
	const { userInfo } = storeToRefs(userStore);
	const updateUserInfoCompVisible = ref(false); // 更新用户信息组件是否显示

	// 显示更新用户信息组件
	const handleShowUpdateUserInfoComp = () => {
		updateUserInfoCompVisible.value = true;
	}

	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			content: '确定退出登录吗？',
			cancelText: '取消',
			confirmText: '确定',
			success: async (res) => {
				if (res.confirm) {
					await api.user_api.logout();
					this.$store.commit('CLEAR_TOKEN');
					uni.reLaunch({
						url: '/pages/custom/index'
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.list {
		margin: 22rpx 25rpx;
		background-color: white;
		border-radius: 14rpx;
		overflow: hidden;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-left: 30rpx;

			&::before {
				position: absolute;
				bottom: 0;
				right: 0;
				height: 1rpx;
				display: block;
				content: '';
				width: calc(100% - 30rpx);
				background-color: #E5E5E5;
			}

			&:last-child::before {
				display: none;
			}

			&::after {
				font-family: iconfont;
				content: '\e601';
				font-size: 30rpx;
				color: #999999;
				margin: 0 22rpx 0 8rpx;
			}

			&.hide-icon::after {
				visibility: hidden;
			}

			&:active {
				background-color: #fafafa;
			}

			.label {
				flex-grow: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				margin-left: 14rpx;
			}

			.value {
				flex-shrink: 0;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}

			.avatar {
				flex-shrink: 0;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
		}
	}

	.btn-group {
		padding: 22rpx 25rpx;

		.logout-btn {
			width: 100%;
			height: 100rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #F44A43;
			line-height: 100rpx;
			background: #FFFFFF;
			border-radius: 25rpx;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.95);
			}
		}
	}
</style>